<template>
  <div class="workbench-container">
    <a-row :gutter="[24, 24]">
      <a-col :span="24">
        <a-page-header
          title="工作台"
          sub-title="欢迎使用基于大模型的医学检测智能生成系统"
          style="padding: 16px 0; background: #fff;"
        />
      </a-col>
    </a-row>

    <a-row :gutter="[24, 24]" style="margin-top: 16px">
      <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <a-card hoverable class="stat-card">
          <template #cover>
            <div class="card-cover-icon blue">
              <file-outlined />
            </div>
          </template>
          <a-statistic title="今日报告" :value="45" class="card-statistic" />
          <a-tag color="blue" class="card-tag">较昨日 +5</a-tag>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <a-card hoverable class="stat-card">
          <template #cover>
            <div class="card-cover-icon green">
              <check-circle-outlined />
            </div>
          </template>
          <a-statistic title="已审核" :value="32" class="card-statistic" />
          <a-tag color="green" class="card-tag">通过率 98%</a-tag>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <a-card hoverable class="stat-card">
          <template #cover>
            <div class="card-cover-icon orange">
              <clock-circle-outlined />
            </div>
          </template>
          <a-statistic title="待审核" :value="13" class="card-statistic" />
          <a-tag color="orange" class="card-tag">较昨日 -3</a-tag>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <a-card hoverable class="stat-card">
          <template #cover>
            <div class="card-cover-icon purple">
              <user-outlined />
            </div>
          </template>
          <a-statistic title="用户总数" :value="342" class="card-statistic" />
          <a-tag color="purple" class="card-tag">较昨日 +12</a-tag>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="[24, 24]" style="margin-top: 24px">
      <a-col :xs="24" :md="24" :lg="12" :xl="12">
        <a-card title="待处理任务" :bordered="false" class="list-card">
          <a-list :data-source="taskList" :pagination="{ pageSize: 5 }">
            <template #renderItem="{ item }">
              <a-list-item class="list-item">
                <a-list-item-meta
                  :title="item.title"
                  :description="item.description"
                >
                  <template #avatar>
                    <a-avatar :style="{ backgroundColor: item.color }">
                      <template #icon><file-outlined /></template>
                    </a-avatar>
                  </template>
                </a-list-item-meta>
                <template #extra>
                  <a-tag :color="item.statusColor">{{ item.status }}</a-tag>
                </template>
              </a-list-item>
            </template>
          </a-list>
          <template #extra>
            <a-button type="primary" ghost>全部任务</a-button>
          </template>
        </a-card>
      </a-col>
      <a-col :xs="24" :md="24" :lg="12" :xl="12">
        <a-card title="系统公告" :bordered="false" class="timeline-card">
          <a-timeline>
            <a-timeline-item color="green">
              <p class="timeline-title"><a-tag color="green">新功能</a-tag> 基因突变数据库更新完成</p>
              <p class="timeline-time"><small>2024-04-08 10:30</small></p>
            </a-timeline-item>
            <a-timeline-item color="blue">
              <p class="timeline-title"><a-tag color="blue">维护</a-tag> 系统将于本周日凌晨2点进行例行维护</p>
              <p class="timeline-time"><small>2024-04-07 14:20</small></p>
            </a-timeline-item>
            <a-timeline-item color="red">
              <p class="timeline-title"><a-tag color="red">重要</a-tag> 医疗法规库已更新最新法规条例</p>
              <p class="timeline-time"><small>2024-04-05 08:45</small></p>
            </a-timeline-item>
            <a-timeline-item color="orange">
              <p class="timeline-title"><a-tag color="orange">提醒</a-tag> 请各部门提交本月工作总结</p>
              <p class="timeline-time"><small>2024-04-02 16:30</small></p>
            </a-timeline-item>
          </a-timeline>
          <template #extra>
            <a-button type="primary" ghost>所有公告</a-button>
          </template>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { 
  FileOutlined, 
  CheckCircleOutlined, 
  ClockCircleOutlined, 
  UserOutlined 
} from '@ant-design/icons-vue';
import { ref } from 'vue';

const taskList = ref([
  {
    title: '基因检测报告 #20240408-001',
    description: '患者: 张三 | 检测项目: EGFR突变检测',
    status: '待审核',
    statusColor: 'orange',
    color: '#1890ff'
  },
  {
    title: '病理检测报告 #20240408-002',
    description: '患者: 李四 | 检测项目: HER2表达检测',
    status: '待生成',
    statusColor: 'blue',
    color: '#52c41a'
  },
  {
    title: '影像检测报告 #20240407-015',
    description: '患者: 王五 | 检测项目: 肺部CT分析',
    status: '待审核',
    statusColor: 'orange',
    color: '#722ed1'
  },
  {
    title: '基因检测报告 #20240407-010',
    description: '患者: 赵六 | 检测项目: BRAF突变检测',
    status: '待修改',
    statusColor: 'red',
    color: '#fa8c16'
  },
  {
    title: '基因检测报告 #20240406-023',
    description: '患者: 钱七 | 检测项目: ALK融合基因检测',
    status: '待生成',
    statusColor: 'blue',
    color: '#eb2f96'
  },
  {
    title: '病理检测报告 #20240406-018',
    description: '患者: 孙八 | 检测项目: PDL1表达检测',
    status: '待审核',
    statusColor: 'orange',
    color: '#faad14'
  }
])
</script>

<style scoped>
.workbench-container {
  padding: 0;
  width: 100%;
}

.stat-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
  margin-bottom: 12px;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-statistic {
  margin-bottom: 8px;
}

.card-tag {
  margin-top: 8px;
}

.card-cover-icon {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  border-radius: 8px 8px 0 0;
}

.blue {
  background: linear-gradient(to right, #1890ff, #36cbcb);
}

.green {
  background: linear-gradient(to right, #52c41a, #b7eb8f);
}

.orange {
  background: linear-gradient(to right, #fa8c16, #ffd666);
}

.purple {
  background: linear-gradient(to right, #722ed1, #d3adf7);
}

.list-card, .timeline-card {
  height: 100%;
  border-radius: 8px;
  margin-bottom: 24px;
}

.list-item {
  padding: 12px 0;
}

.timeline-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.timeline-time {
  color: rgba(0, 0, 0, 0.45);
  margin: 0;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .workbench-container {
    padding: 0 12px;
  }
  
  .card-cover-icon {
    height: 80px;
    font-size: 36px;
  }
  
  .app-main {
    padding: 12px;
  }
  
  .stat-card, .list-card, .timeline-card {
    margin-bottom: 16px;
  }
}
</style> 